<template>
  <div class="content">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-button type="primary" size="small" @click.native="addBroker">
            添加经纪
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-input v-model="containsName" placeholder="请输入内容" style="width:100%">
            <el-button slot="append" icon="el-icon-search" @click="seek" />
          </el-input>
        </el-col>
      </el-row>
      <el-divider />

      <el-row>
        <el-table
          :data="agents"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            label="图片"
            width="150"
          >
            <template v-slot="{row}">
              <div>
                <img
                  :src="row.image"
                  style="width:100%"
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="120"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            width="120"
          />
          <el-table-column
            prop="phone"
            label="电话"
            width="120"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
          <el-table-column
            prop="desc"
            label="介绍"
            max-height="200px"
          >
            <template v-slot="{row}">
              <div style="overflow-x: hidden; max-height: 200px;">
                {{ row.desc }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="editAgent(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delAgent(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <template>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-pagination
            :current-page.sync="page"
            :page-sizes="[2, 4, 8, 16]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>

      </template>
    </el-card>
    <add-broker ref="addBroker" :is-show-dialog="isShowDialog" style="padding-bottom: 100px;" />
  </div>
</template>

<script>
import AddBroker from './components/addBroker.vue'
import { getAgents, delAgent, getAgentCount } from '@/api/agents'

export default {
  components: {
    AddBroker
  },
  data() {
    return {
      page: 1,
      pageSize: 2,
      total: 0,
      isShowDialog: false,
      agents: [],
      agent: {},
      queryName: '',
      containsName: ''
    }
  },
  created() {
    this.getAgents()
  },
  methods: {
    // 当前每页显示条数
    handleSizeChange(val) {
      // console.log('1', val)
      this.pageSize = val
      this.queryAgents()
    },
    // 当前页码
    handleCurrentChange(val) {
      // console.log('2', val)
      this.page = val
      this.queryAgents()
    },
    // 搜索
    seek() {
      this.page = 1
      this.queryName = this.containsName
      this.queryAgents()
    },
    // 查询
    async queryAgents() {
      this.agents = await getAgents({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize, name_contains: this.queryName })
      // console.log(data)
      this.total = await getAgentCount({ name_contains: this.queryName })
    },

    // 编辑
    async editAgent(id) {
      await this.$refs.addBroker.getAgent(id)
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.addBroker.showImage()
      })
    },
    // 删除
    async delAgent(id) {
      // console.log(id)
      await this.$confirm('请问是否删除!')
      await delAgent(id)
      this.$message.success('删除成功')
      if (this.page > 1 && this.agents.length === 1) {
        this.page--
      }
      this.queryAgents()
    },
    // 获取数据
    async getAgents() {
      this.agents = await getAgents({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize })
      this.total = await getAgentCount()
    },
    addBroker() {
      this.isShowDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin: 20px;
  /* display: flex; */
}
</style>
